<template>
  <div class="module-template">
    <div class="module-header">
      <button class="back-btn" @click="goBack">← Back to Home</button>
      <h1>{{ moduleName }}</h1>
      <p>{{ description }}</p>
    </div>

    <!-- Module-specific content goes here -->
    <div class="module-section">
      <h3>Module Content</h3>
      <p>Replace this content with your module-specific implementation</p>

      <!-- 示例：模块内导航 -->
      <div class="module-navigation">
        <h4>Module Sections:</h4>
        <div class="section-list">
          <div class="section-item" @click="navigateToSection('section1')">
            <span>🎨 Section 1</span>
          </div>
          <div class="section-item" @click="navigateToSection('section2')">
            <span>⚙️ Section 2</span>
          </div>
          <div class="section-item" @click="navigateToSection('section3')">
            <span>📊 Section 3</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const moduleName = ref('Module Template')
const description = ref('A template module for development')

// Module-specific logic can be added here
const moduleData = ref('Example data')

function goBack() {
  router.push('/')
}

function navigateToSection(section) {
  alert(`Navigating to ${section} - Implement your section logic here!`)
}

function loadModuleData() {
  // Module loading logic
  console.log('Module data loaded')
}
</script>

<style scoped>
.module-template {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background: #f5f5f5;
  min-height: 100vh;
}

.module-header {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  text-align: left;
}

.back-btn {
  background: #42b883;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 15px;
  font-size: 14px;
}

.back-btn:hover {
  background: #37a172;
}

.module-header h1 {
  color: #42b883;
  margin: 0 0 10px 0;
}

.module-section {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin: 20px 0;
}

.module-navigation {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed #ddd;
}

.section-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.section-item {
  background: #f0f0f0;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.section-item:hover {
  background: #e0e0e0;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .module-template {
    padding: 10px;
  }

  .module-header {
    padding: 15px;
  }

  .section-list {
    grid-template-columns: 1fr;
  }
}
</style>